<template>
  <div class="bigBox">
    <el-form ref="FormData" label-width="90px">
      <div class="topBox">
        <el-row :gutter="50">
          <el-col :span="8">
            <el-form-item label="快递员账号:">
              <el-input v-model="FormData.account" placeholder="请输入快递员账号" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递员姓名:">
              <el-input v-model="FormData.name" placeholder="请输入快递员姓名" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递手机号:">
              <el-input v-model="FormData.mobile" placeholder="请输入快递手机号" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属机构:">
              <template>
                <el-select
                  v-model="FormData.agentId"
                  style="width: 100%"
                  clearable
                  placeholder="请选择所属机构"
                >
                  <el-tree
                    node-key="id"
                    :data="treeData"
                    class="add_tree"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :check-on-click-node="true"
                  >
                    <span slot-scope="{ data }" class="custom-tree-node">
                      <el-option
                        style="padding: 0"
                        :label="data.name"
                        :value="data.id"
                      />
                    </span>
                  </el-tree>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="danger" @click="searchBtn">搜索</el-button>
            <el-button @click="resetBtn">重置</el-button>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <div class="contentList">
      <el-table
        :data="courierList"
        border
        style="width: 100%"
      >
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="180"
        />
        <el-table-column
          align="center"
          prop="account"
          label="快递员账号"
          width="180"
        />
        <el-table-column
          align="center"
          prop="name"
          label="快递员姓名"
          width="180"
        />
        <el-table-column
          align="center"
          prop="mobile"
          label="快递员手机号"
          width="180"
        />
        <el-table-column
          align="center"
          prop="agency.name"
          label="所属机构"
          width="180"
        />
        <el-table-column
          align="center"
          prop="status"
          label="工作状态"
          width="180"
        >
          <template v-slot="{row}">
            <span v-if="row.status===0" class="re0">休息</span>
            <span v-else-if="row.status===1" class="re1">上班</span>
            <span v-else>空</span>
          </template>

        </el-table-column>
        <el-table-column
          align="center"
          prop="controls"
          label="操作"
          width="200"
        >
          <el-button type="text" size="small" @click="jobAreaBtn">配置范围</el-button>
        </el-table-column>>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import { getCourierList, getInstitutionList } from '@/api/employee/courier'

export default {
  data() {
    return {
      showDialog: false,
      // ---分页器
      params: {
        page: 1,
        pageSize: 10
      },
      total: 0, // 总数据数量

      // 输入框
      FormData: {
        account: '', // 快递员账号
        name: '', // 姓名
        mobile: '', // 手机号
        agentId: null // 所属机构
      },
      courierList: [], // 数组列表
      treeData: [], // 树形机构列表
      defaultProps: { children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getCourierList() // 获取快递员列表
    this.getInstitutionList() // 获取机构下拉树形列表
  },
  methods: {
    // 赋值每页存几个
    sizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.params.pageSize = val // 选择这个:page-sizes="[10, 20, 30, 50]"时 把值赋值给this.params.pageSize
      this.getCourierList() // 重新渲染
    },
    // 当每次切换页码时候触发,当前页
    pageChange(newPage) {
      console.log(`当前页: ${newPage}`)
      this.params.page = newPage // 赋值页码
      this.getCourierList() // 重新渲染
    },

    // 获取快递员
    async getCourierList() {
      const res = await getCourierList(this.params) // 调用获取快递员列表数据,带上参数
      this.courierList = res.data.items // 赋值渲染快递员数组
      // console.log(res.data.items)
      this.total = +res.data.counts // 获取总数据数量,因为数据是字符串,+做隐式转换
    },

    // 获取搜索那里的所属机构下拉列表
    async getInstitutionList() {
      const res = await getInstitutionList()
      // console.log(JSON.parse(res.data))
      this.treeData = JSON.parse(res.data) //  获取回来数据是字符串,需要转
    },
    // 搜索按钮
    async searchBtn() {
      const res = await getCourierList({ ...this.params, ...this.FormData }) // 把搜索的内容传参给api
      // console.log(res.data.item)
      this.courierList = res.data.items // 数据回来赋值给渲染快递员的数组
      this.page = 1 // 按搜索后把页码切回第一页
      this.total = +res.data.counts // 搜索后把回来的数据数量赋值,因为数据是字符串,+做隐式转换
    },

    // 重置按钮
    resetBtn() {
      this.FormData.account = ''
      this.FormData.name = ''
      this.FormData.mobile = ''
      this.FormData.agentId = null
      // console.log(this.$refs.FormData)
      console.log('重置')
    },

    // 作业范围
    jobAreaBtn() {
      console.log('作业范围')
      this.showDialog = true
    }
  }
}
</script>

<style lang="scss" scpped>
.bigBox{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 15px 15px 15px;
  background-color:#f3f4f7;
  .topBox{
    margin: 0 15px 15px 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top:30px ;
    background-color: #fff;
  }
  .contentList{
    margin: 0 15px 15px 15px;
    background-color: #fff;
  }
  .block{
    // align-items: center;
    text-align: center;
    background-color: #fff;
  }
}
.form-box{
  background-color: #ffffff;
  padding:20px 30px;
}
.re0{
  color: red;
}
// .re1{
//   color: #1b95db;
// }
</style>
